<template>
  <div>
    <van-overlay z-index="10" :show="show" @click="$emit('changeShow')">
      <div class="wrapper" @click.stop>
        <img src="@/assets/img/cartoon.png" alt />
        <div class="main">
          <p>欢迎登录喜茶星球~</p>
          <span>登录后消费可获得积分，享受更好的服务体验</span>
          <div class="btn" @click="$router.push({name: 'login',params: {}})">使用手机号或邮箱登录</div>
          <div class="more">
            <span>更多登录方式</span>
          </div>
          <div class="wechat">
            <svg class="icon icon-size" aria-hidden="true">
              <use xlink:href="#icon-weixin" />
            </svg>
          </div>
          <div class="tags">
            <span>点击登录喜茶GO，即表示已阅读并同意</span>
            <br />
            <span style="color: #dba871">《喜茶用户隐私条款》《用户服务须知》</span>
          </div>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import Vue from "vue";
import { Overlay } from "vant";

Vue.use(Overlay);
export default {
  name: "toLogin",
  props: {
    show: Boolean
  }
};
</script>

<style scoped>
.wrapper {
  position: absolute;
  bottom: 1.4rem;
  left: 0;
  right: 0;
  top: 40%;
  background-color: #fff;
  box-sizing: border-box;
  padding: 0.3rem 0.5rem;
  border-radius: 0.3rem 0.3rem 0 0;
}
.wrapper img {
  position: absolute;
  top: -2.587rem;
  right: 0.5rem;
  width: 6rem;
  height: 3rem;
  z-index: 10;
}
.main p {
  font-size: 22px;
  color: #333;
  margin: 0.4rem 0;
}
.main span {
  font-size: 14px;
  color: #ababab;
}
.main .btn {
  font-size: 16px;
  color: #fff;
  width: 100%;
  border-radius: 3px;
  height: 1.2rem;
  background-color: #dba871;
  margin: 1.3rem 0;
  text-align: center;
  line-height: 1.2rem;
}
.main .more {
  text-align: center;
  font-size: 13px;
  padding: 0.3rem 0;
}
.main .more span {
  font-size: 13px;
}
.main .more span:before {
  content: "";
  display: inline-block;
  width: 2rem;
  height: 1px;
  border-top: 1px solid #e1e1e1;
  margin-bottom: 0.1rem;
  margin-right: 0.2rem;
}
.main .more span:after {
  content: "";
  display: inline-block;
  width: 2rem;
  height: 1px;
  border-top: 1px solid #e1e1e1;
  margin-bottom: 0.1rem;
  margin-left: 0.2rem;
}
.wechat {
  text-align: center;
}
.icon-size {
  font-size: 36px;
}
.tags {
  margin-top: 1rem;
  text-align: center;
}
.tags span {
  font-size: 13px;
  color: #333;
}
</style>